<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap">
			<view style="background:#FFF; padding:40rpx;">
				<block v-if="loginModule.hasLogin === true">
					<view class="uni-h3 uni-center uni-common-mt">已登录</view>
					<view class="uni-hello-text uni-center">
						<text>每个账号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
					</view>
				</block>
				<block v-if="loginModule.hasLogin === false">
					<view class="uni-h3 uni-center uni-common-mt">未登录</view>
					<view class="uni-hello-text uni-center">
						请点击按钮登录
					</view>
				</block>
			</view>
			<view class="uni-btn-v uni- uni-common-mt">

				<button type="primary" class="page-body-button" @click="tologin" :key="key">
					登录授权
				</button>


			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'


	export default {
		data() {
			return {
				title: 'login',
				providerList: [],

			}
		},
		computed: {
			...mapState(['loginModule'])
		},

		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			tologin() {
				// #ifdef MP-WEIXIN
				let provider = 'weixin'
				// #endif
				// #ifdef MP-ALIPAY
				let provider = 'alipay'
				// #endif

				uni.login({
					provider: provider,
					// #ifdef MP-ALIPAY
					scopes: 'auth_user', //支付宝小程序需设置授权类型
					// #endif
					success: (res) => {
						console.log('login success:', res);
						// 更新保存在 store 中的登录状态
						this.login(provider);
						uni.navigateTo({
							url:'../2/index'
						})
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
			}
		}
	}
</script>

<style>
	button {
		background-color: #007aff;
		color: #ffffff;
	}
</style>
